<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@2.7.14/dist/vue.min.js"></script>
    <style>
    </style>
</head>
<body>
<div id="app">
    <star v-model="s1"></star><h1>{{s1}}</h1>
    <star :value.sync="s2"></star><h1>{{s2}}</h1>
    <star :value.sync="s3"></star><h1>{{s3}}</h1>
</div>
<script>
    Vue.component("star",{
        props: ["value"],  // 1-5
        model: {
            prop: "value",
            event: "change"
        },
        template:`
            <div>
                <img v-for=" i in 5" :src="i<=value?'imgs/star1.png':'imgs/star3.png'"
                    @click="value=i">
            </div>
        `,
        watch:{
            value(newValue){
                // v-model 方式
                this.$emit("change", newValue);
                // sync 方式
                this.$emit("update:value", newValue);
            }
        }
    })
    var v = new Vue({
        el:"#app",
        data: {
            s1 : 2,
            s2 : 3,
            s3 : 5
        }
    })
    /**
     * 组件间通信(访问)
     1. $refs + $parent + $root
     2. 定义组件事件: $emit("事件名(只支持松散命名)", 参数列表)
     3. 自定义 v-model  =  model + $emit(...)
     4. 使用 .sync 属性后缀  $emit("update:xxx")
     */
</script>
</body>
</html>